<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header>
	<link rel="stylesheet" th:href="@{/css/style.css}"/>
	<script type="text/javascript" th:src="@{/js/jquery-1.10.1.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.blockUI.min.js}"></script>

	<title> Weather Search </title>
</header>
<body>
	<div id="content" style="width: 500px">
		<div id="condition" style="margin: 10px 0px">
			<form id="weather-search-form">
				<select id="req_city">
					<optgroup th:each="country:${countryList}" th:label="${country.name}">
						<option th:each="city:${country.cityList}" th:text="${city}"></option>
					</optgroup>
				</select>
				<input type="button" value="Search" onclick="search()" />
			</form>
		</div>
		<div id="result">
			<table border="0px" cellpadding="3px" cellspacing="1px" bgcolor="blue">
				<tr>
					<td bgcolor="#f0f8ff" width="150px">City</td>
					<td bgcolor="#e6e6fa" width="200px"><span id="res_city"></span></td>
				</tr>
				<tr>
					<td bgcolor="#f0f8ff" width="150px">Updated time</td>
					<td bgcolor="#e6e6fa" width="200px"><span id="res_update_time"></span></td>
				</tr>
				<tr>
					<td bgcolor="#f0f8ff" width="150px">Weather</td>
					<td bgcolor="#e6e6fa" width="200px"><span id="res_weather"></span></td>
				</tr>
				<tr>
					<td bgcolor="#f0f8ff" width="150px">Temperature</td>
					<td bgcolor="#e6e6fa" width="200px"><span id="res_temperature"></span></td>
				</tr>
				<tr>
					<td bgcolor="#f0f8ff" width="150px">Wind</td>
					<td bgcolor="#e6e6fa" width="200px"><span id="res_wind"></span></td>
				</tr>
			</table>
		</div>
	</div>

	<script>
		function search() {
			var city = $("#req_city option:selected").val();
			if (city) {
				$.ajax({
					type: "get",
					url: "/weather/" + city,
					beforeSend:function(XMLHttpRequest){
						$.blockUI({
							fadeIn : 0,
							fadeOut : 0,
							message: '<h1>loading...</h1>',
							css: { border: '1px solid #a00' },
							showOverlay : true
						});
					},
					success: function(data) {
						if (data.message.message == 'OK') {
							$('#res_city').text(data.content.city);
							$('#res_update_time').text(data.content.updateTime);
							$('#res_weather').text(data.content.weather);
							$('#res_temperature').text(data.content.temperature);
							$('#res_wind').text(data.content.wind);
						}
					},
					complete:function(XMLHttpRequest, textStatus){
						$.unblockUI();
					},
					error:function(XMLHttpRequest, textStatus, errorThrown){
						alert('error, pls try again');
						$("#loading").empty();
					}
				});
			}
		}
	</script>
</body>
</html>